<template>
	<main-content
		content-class="game-content"
		:otherDependenComponents="otherDependenComponents"
		:tableHeight.sync="tableHeight"
	>
		<template slot="query">
			<el-form ref="form" :inline="true" :model="queryData">
				<div :class="`${isCollapsed ? 'query-form-collapsed' : ''}`">
					<el-form-item :label="$t('common.belong_merchant') + ':'">
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item>
						<el-select
							popper-append-to-body
							v-model="timeType"
							:placeholder="$t('common.please_enter')"
							style="width: 150px; margin-right: -4px"
						>
							<el-option
								:label="$t('game.game_betslip.settle_time')"
								value="sunTime"
							></el-option>
							<el-option
								:label="$t('game.game_betslip.bet_time')"
								value="betTime"
							></el-option>
							<!-- <el-option
								label="重算时间"
								value="reTime"
								v-if="isReset"
							></el-option> -->
							<el-option
								label="统计时间"
								value="statTime"
							></el-option>
							<el-option
								label="开赛时间"
								value="matchTime"
							></el-option>
						</el-select>
						<el-date-picker
							v-model="timeTypeOption[timeType]"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd HH:mm:ss"
							type="datetimerange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							clearable
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="$t('game.game_betslip.bet_status') + ':'"
						class="tagheight"
					>
						<el-select
							v-model="queryData.obBetStatus"
							style="width: 200px"
							clearable
							:placeholder="$t('common.all')"
							:popper-append-to-body="true"
						>
							<el-option
								v-for="item in betStatusType"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="$t('game.venue_access_manage.venue_type') + ':'"
						prop="venueTypeCode"
					>
						<el-select
							v-model="queryData.venueTypeCode"
							clearable
							:placeholder="$t('common.all')"
							style="width: 210px"
							:popper-append-to-body="true"
						>
							<el-option
								v-for="item in bwVenueTypeList"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="$t('game.venue_name') + ':'"
						prop="venueCodeList"
					>
						<el-select
							v-model="queryData.venueCodeList"
							clearable
							:placeholder="$t('common.all')"
							collapse-tags
							multiple
							style="width: 200px"
							:popper-append-to-body="true"
						>
							<el-option
								v-for="item in bwVenueList"
								:key="item.code"
								:label="item[getKey('venueName')]"
								:value="item.venueCode"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="$t('game.game_manage.game_name') + ':'"
					>
						<el-input
							v-model="queryData.gameTypeName"
							clearable
							size="medium"
							style="width: 200px"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<!-- 注单号 -->
					<el-form-item>
						<el-select
							v-model="orderType"
							:placeholder="$t('common.please_enter')"
							style="width: 130px; margin-right: -4px"
							popper-append-to-body
						>
							<el-option
								:label="$t('game.game_betslip.bet_number')"
								value="id"
							></el-option>
							<el-option
								:label="
									$t('game.game_betslip.three_bet_number')
								"
								value="generatedId"
							></el-option>
						</el-select>
						<el-input
							v-if="orderType === 'id'"
							v-model="queryData.id"
							clearable
							size="medium"
							v-input="{ name: 'symbols' }"
							style="width: 240px"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							@keyup.enter.native="enterSearch"
						></el-input>
						<el-input
							v-else
							v-input="{ name: 'symbols' }"
							v-model="queryData.generatedId"
							clearable
							size="medium"
							style="width: 240px"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<!-- 注单号 -->
					<!-- 账号查询 -->
					<el-form-item>
						<el-select
							popper-append-to-body
							v-model="memberType"
							:placeholder="$t('common.please_enter')"
							style="width: 200px; margin-right: -4px"
						>
							<el-option
								:label="$t('common.member_number')"
								value="memberName"
							></el-option>
							<el-option
								:label="$t('common.game_number')"
								value="playerName"
							></el-option>
							<el-option
								:label="$t('common.top_agent')"
								value="parentProxyName"
							></el-option>
							<el-option
								label="所属代理"
								value="proxyName"
							></el-option>
							<el-option
								:label="$t('game.game_betslip.general_agent')"
								value="topProxyName"
							></el-option>
						</el-select>
						<el-input
							v-model="queryData[memberType]"
							clearable
							size="medium"
							style="width: 200px"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<!-- 账号查询 -->
					<el-form-item
						:label="$t('game.game_betslip.bet_device') + ':'"
						class="tagheight"
					>
						<el-select
							v-model="queryData.obDeviceType"
							style="width: 200px; margin-right: 20px"
							multiple
							clearable
							collapse-tags
							:placeholder="$t('common.all')"
							:popper-append-to-body="true"
						>
							<el-option
								v-for="item in betDeviceType"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('game.game_betslip.bet_ip') + ':'">
						<el-input
							v-model.trim="queryData.loginIp"
							clearable
							size="medium"
							style="width: 245px"
							:placeholder="$t('common.please_enter')"
							:disabled="loading"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<!-- <el-form-item
							:label="$t('common.vip_level') + ':'"
							class="numberBox"
						>
							<el-input-number
								v-model="queryData.vipLevelMin"
								size="medium"
								:placeholder="$t('game.game_betslip.min_number')"
								:style="
									$i18n.locale === 'zh_CN'
										? `width: 108px`
										: `width: 130px`
								"
								:controls="false"
								:min="0"
								:max="99"
								:precision="0"
								name="vipLevelMin"
								@blur="checkValue($event)"
							></el-input-number>
							-
							<el-input-number
								v-model="queryData.vipLevelMax"
								size="medium"
								:placeholder="$t('game.game_betslip.max_number')"
								:style="
									$i18n.locale === 'zh_CN'
										? `width: 108px`
										: `width: 130px`
								"
								:controls="false"
								:min="0"
								:max="99"
								:precision="0"
								name="vipLevelMax"
								@blur="checkValue($event)"
							></el-input-number>
						</el-form-item> -->
					<el-form-item
						:label="$t('game.game_betslip.bet_amount') + ':'"
						class="numberBox"
					>
						<el-input-number
							v-model="queryData.betAmountMin"
							size="medium"
							:placeholder="$t('game.game_betslip.min_number')"
							:style="
								$i18n.locale === 'zh_CN'
									? `width: 108px`
									: `width: 130px`
							"
							:controls="false"
							:min="0"
							:max="9999999999.99"
							:precision="2"
							name="betAmountMin"
							@blur="checkValue($event)"
						></el-input-number>
						-
						<el-input-number
							v-model="queryData.betAmountMax"
							size="medium"
							:placeholder="$t('game.game_betslip.max_number')"
							:style="
								$i18n.locale === 'zh_CN'
									? `width: 108px`
									: `width: 130px`
							"
							:controls="false"
							:min="0"
							:max="9999999999.99"
							:precision="2"
							name="betAmountMax"
							@blur="checkValue($event)"
						></el-input-number>
					</el-form-item>
					<el-form-item
						:label="$t('game.game_betslip.member_win') + ':'"
						class="numberBox"
					>
						<el-input-number
							v-model="queryData.netAmountMin"
							size="medium"
							:placeholder="$t('game.game_betslip.min_number')"
							:style="
								$i18n.locale === 'zh_CN'
									? `width: 108px`
									: `width: 130px`
							"
							:controls="false"
							:min="-9999999999.99"
							:max="9999999999.99"
							:precision="2"
							name="netAmountMin"
							@blur="checkValue($event)"
						></el-input-number>
						-
						<el-input-number
							v-model="queryData.netAmountMax"
							size="medium"
							:placeholder="$t('game.game_betslip.max_number')"
							:style="
								$i18n.locale === 'zh_CN'
									? `width: 108px`
									: `width: 130px`
							"
							:controls="false"
							:min="-9999999999.99"
							:max="9999999999.99"
							:precision="2"
							name="netAmountMax"
							@blur="checkValue($event)"
						></el-input-number>
					</el-form-item>
					<el-form-item
						label="是否重算"
						prop="obSettleCount"
						v-if="!isReset"
					>
						<el-select
							popper-append-to-body
							v-model="queryData.obSettleCount"
							clearable
							:placeholder="$t('common.all')"
							style="width: 200px"
						>
							<el-option label="未重算" :value="0" />
							<el-option label="重算过1次" :value="1" />
							<el-option label="重算过2次" :value="2" />
							<el-option label="重算大于2次" :value="3" />
						</el-select>
					</el-form-item>
					<!-- 	v-if="queryData.venueTypeCode === 'DZ_CARD'" -->
					<el-form-item
						label="注单类型"
						prop="betType"
						v-if="queryData.venueTypeCode === 'DZ_CARD'"
					>
						<el-select
							popper-append-to-body
							v-model="queryData.betType"
							clearable
							:placeholder="$t('common.all')"
							style="width: 200px"
						>
							<!-- parseInt(key) 对应 subList 下 type = 1  和 type =2 和type = 13 -->
							<el-option
								v-for="(item, key) in parentBetTypes"
								:key="key"
								:label="item"
								:value="parseInt(key)"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="业务模式" prop="businessModel">
						<el-select
							v-model="queryData.businessModel"
							clearable
							:placeholder="$t('common.all')"
							style="width: 200px"
							popper-append-to-body
						>
							<el-option label="现金模式" :value="1" />
							<el-option label="信用模式" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="联赛/赛事名称" prop="roundNo">
						<el-select
							v-model="queryData.roundNo"
							clearable
							filterable
							remote
							:remote-method="remoteMethod"
							:loading="remoteLoading"
							:placeholder="$t('common.please_enter')"
							style="width: 200px"
							popper-append-to-body
						>
							<el-option
								v-for="(item, index) in matchNameList"
								:key="index"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="赛事ID">
						<el-input
							v-model.trim="queryData.roundId"
							clearable
							size="medium"
							style="width: 200px"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<el-form-item label="是否延迟" prop="delayStatus">
						<el-select
							v-model="queryData.delayStatus"
							clearable
							:placeholder="$t('common.all')"
							style="width: 200px"
						>
							<el-option label="是" value="0" />
							<el-option label="否" value="1" />
						</el-select>
					</el-form-item>
				</div>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('302011')"
						icon="el-icon-download"
						type="warning"
						:disabled="exportLoading"
						:loading="exportLoading"
						size="medium"
						@click="exportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						type="success"
						icon="el-icon-sort"
						:disabled="loading"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button>
					<el-button
						type="text"
						:disabled="loading"
						size="medium"
						@click="toggleSearchArea"
					>
						{{ isCollapsed ? '展开' : '收起' }}
						<i
							:class="
								`collapse-icon ${
									isCollapsed
										? 'el-icon-arrow-down'
										: 'el-icon-arrow-up'
								}`
							"
						></i>
					</el-button>
				</el-form-item>
				<date-picker-shortcuts
					kind="shortcutForButtonsWOPeriod"
					:action="handleShortcutBtnClick"
					:loading="loading"
				/>
			</el-form>
			<div class="msgList" v-if="!isReset">
				<p>
					<span class="normalRgba">
						<span>{{ $t('game.game_betslip.settled') }}</span>
						<span>{{ summary.settledCount || 0 }}</span>
						{{ $t('game.game_betslip.piece') }}
					</span>
				</p>
				<p>
					<span class="deleteRgba">
						<span>
							{{ $t('game.game_betslip.unsettlement') }}
						</span>
						<span>{{ summary.unSettledCount || 0 }}</span>
						{{ $t('game.game_betslip.piece') }}
					</span>
				</p>
				<p>
					<span class="disableRgba">
						<span>{{ $t('game.game_betslip.cancelled') }}</span>
						<span>{{ summary.noSettledCount || 0 }}</span>
						{{ $t('game.game_betslip.piece') }}
					</span>
				</p>
				<p>
					{{ $t('game.game_betslip.bet_amount') }}：
					<money
						v-for="(value, key, index) in summary.betAmount"
						v-show="key === 'usdtSum'"
						:key="index"
						style="margin-right: 20px"
						:value="
							`${handleCurrency(getCurrency(key))}
								${handleNumber(getCurrency(key), summary.betAmount[key])}`
						"
					/>
				</p>
				<p>
					{{ $t('game.game_betslip.efficient_bet') }}:
					<span>
						<money
							v-for="(value,
							key,
							index) in summary.validBetAmount"
							v-show="key === 'usdtSum'"
							:key="index"
							style="margin-right: 20px"
							:value="
								`${handleCurrency(getCurrency(key))}
									 ${handleNumber(getCurrency(key), summary.validBetAmount[key])}`
							"
						/>
					</span>
				</p>
				<p>
					{{ $t('game.game_betslip.member_win') }}：
					<span
						v-for="(value, key, index) in summary.netAmount"
						:key="index"
						v-show="key === 'usdtSum'"
						:class="[
							summary.netAmount[key] > 0
								? 'success'
								: summary.netAmount[key] < 0
								? 'redColor'
								: ''
						]"
					>
						<money
							style="margin-right: 20px"
							:value="
								`${handleCurrency(getCurrency(key))}
									${handleNumber(getCurrency(key), summary.netAmount[key])}`
							"
						/>
					</span>
				</p>
			</div>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:show-summary="!isReset"
				:max-height="tableHeight"
				:data="tableData"
				:header-cell-style="getRowClass"
				:summary-method="(val) => handleRow(val, summary)"
				@sort-change="_changeTableSort"
			>
				<el-table-column
					prop="id"
					fixed="left"
					align="center"
					min-width="200px"
					:label="$t('game.game_betslip.bet_number')"
				>
					<template slot-scope="scope">
						{{ scope.row.betOrderId || scope.row.id }}
					</template>
				</el-table-column>
				<el-table-column
					prop="memberName"
					fixed="left"
					align="center"
					:label="$t('common.member_number')"
					min-width="130px"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.memberName"
							:title="scope.row.memberName"
							:copy="copy"
						>
							{{ scope.row.memberName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('game.game_betslip.three_bet_number')
						]
					"
					prop="id"
					align="center"
					min-width="200px"
					:label="$t('game.game_betslip.three_bet_number')"
				>
					<template slot-scope="scope">
						{{ scope.row.generatedId }}
					</template>
				</el-table-column>
				<el-table-column
					prop="venueName"
					align="center"
					v-if="
						tableColumnData[
							$t('game.venue_access_manage.venue_type')
						]
					"
					:label="$t('game.venue_access_manage.venue_type')"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{ scope.row.venueTypeName || '--' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="venueName"
					align="center"
					:label="$t('game.venue_name')"
					v-if="tableColumnData[$t('game.venue_name')]"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{ scope.row.venueName || '--' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="gameTypeName"
					align="center"
					:label="$t('game.game_manage.game_name')"
					v-if="tableColumnData[$t('game.game_manage.game_name')]"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{ scope.row.gameTypeName || '--' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="playerName"
					align="center"
					:label="$t('common.game_number')"
					v-if="tableColumnData[$t('common.game_number')]"
					min-width="150px"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.playerName"
							:title="scope.row.playerName"
							:copy="copy"
						>
							{{ scope.row.playerName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="accountType"
					align="center"
					:label="$t('common.number_type')"
					v-if="tableColumnData[$t('common.number_type')]"
					min-width="130px"
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.accountType, 'accountType') }}
					</template>
				</el-table-column>
				<el-table-column
					prop="businessModel"
					align="center"
					label="业务模式"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{
							scope.row.businessModel === 1
								? '现金模式'
								: '信用模式'
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantName"
					align="center"
					:label="$t('game.game_betslip.merchant_name')"
					v-if="
						tableColumnData[$t('game.game_betslip.merchant_name')]
					"
					min-width="150px"
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="parentProxyName"
					align="center"
					:label="$t('common.top_agent')"
					v-if="tableColumnData[$t('common.top_agent')]"
					min-width="150px"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.parentProxyName"
							:title="scope.row.parentProxyName"
							:copy="copy"
						>
							{{ scope.row.parentProxyName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="parentProxyName"
					align="center"
					v-if="
						tableColumnData[$t('game.game_betslip.general_agent')]
					"
					:label="$t('game.game_betslip.general_agent')"
					min-width="150px"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.topProxyName"
							:title="scope.row.topProxyName"
							:copy="copy"
						>
							{{ scope.row.topProxyName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="betAmount"
					align="center"
					:label="$t('game.game_betslip.bet_amount')"
					v-if="tableColumnData[$t('game.game_betslip.bet_amount')]"
					min-width="120px"
					sortable
				>
					<template slot-scope="scope">
						<money
							:value="
								`${handleCurrency(scope.row.memberCurrency)}
									${handleNumber(scope.row.memberCurrency, scope.row.betAmount)}`
							"
						/>
					</template>
				</el-table-column>
				<el-table-column
					prop="betType"
					align="center"
					:label="$t('game.game_betslip.parent_betType')"
					v-if="
						tableColumnData[$t('game.game_betslip.parent_betType')]
					"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{ parentBetTypes[scope.row.betType] || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userHandFee"
					align="center"
					:label="$t('game.game_betslip.pump_contribution')"
					v-if="
						tableColumnData[
							$t('game.game_betslip.pump_contribution')
						]
					"
					sortable
					min-width="150px"
				>
					<template slot-scope="scope">
						<money
							:value="
								`${handleCurrency(scope.row.memberCurrency)}
						${handleNumber(scope.row.memberCurrency, scope.row.userHandFee)}`
							"
						/>
					</template>
				</el-table-column>
				<el-table-column
					prop="betType"
					align="center"
					:label="
						$t('game.game_betslip.pump_contribution_contribution')
					"
					v-if="
						tableColumnData[
							$t(
								'game.game_betslip.pump_contribution_contribution'
							)
						]
					"
					sortable
					min-width="150px"
				>
					<template slot-scope="scope">
						<money
							:value="
								`${handleCurrency(scope.row.memberCurrency)}
						${handleNumber(scope.row.memberCurrency, scope.row.pumpContribution)}`
							"
						/>
					</template>
				</el-table-column>
				<el-table-column
					prop="validBetAmount"
					align="center"
					:label="$t('game.game_betslip.efficient_bet')"
					v-if="
						tableColumnData[$t('game.game_betslip.efficient_bet')]
					"
					min-width="120"
					sortable
				>
					<template slot-scope="scope">
						<money
							v-if="scope.row.obBetStatus === 1"
							:value="
								`${handleCurrency(scope.row.memberCurrency)}
						${handleNumber(scope.row.memberCurrency, scope.row.validBetAmount)}`
							"
						/>
						<span v-else>$0</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="netAmount"
					align="center"
					sortable
					v-if="tableColumnData[$t('game.game_betslip.member_win')]"
					:label="$t('game.game_betslip.member_win')"
					min-width="120"
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.netAmount)">
							{{ handleCurrency(scope.row.memberCurrency) }}
							{{
								handleNumber(
									scope.row.memberCurrency,
									scope.row.netAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="obBetStatus"
					align="center"
					:label="$t('game.game_betslip.bet_status')"
					v-if="tableColumnData[$t('game.game_betslip.bet_status')]"
					min-width="100px"
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.obBetStatus === 0"
							class="deleteRgba"
						>
							{{
								typeFilter(
									scope.row.obBetStatus,
									'betStatusType'
								)
							}}
						</span>
						<span
							v-else-if="scope.row.obBetStatus === 1"
							class="normalRgba"
						>
							{{
								typeFilter(
									scope.row.obBetStatus,
									'betStatusType'
								)
							}}
						</span>
						<span
							v-else-if="scope.row.obBetStatus === 2"
							class="disableRgba"
						>
							{{
								typeFilter(
									scope.row.obBetStatus,
									'betStatusType'
								)
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="obSettleCount"
					align="center"
					min-width="150px"
					:label="$t('game.game_betslip.ob_settle_count')"
					v-if=" !isReset &&
						tableColumnData[$t('game.game_betslip.ob_settle_count')]
					"
				>
					<template slot-scope="scope">
						<span
							:style="{
								color: scope.row.obSettleCount > 0 ? 'red' : ''
							}"
						>
							{{ formatObSettleCount(scope.row.obSettleCount) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="delayStatus"
					align="center"
					min-width="150px"
					label="是否延迟"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.delayStatus === '0' ? '是' : '否' }}
						</span>
					</template>
				</el-table-column>
				<!-- 非重算情况下 显示延迟标记列 -->
				<el-table-column
					v-if="!isReset"
					prop="delayFirstStatus"
					align="center"
					min-width="150px"
					label="延迟标记"
				>
					<template slot-scope="scope">
						<span>
							{{
								scope.row.delayFirstStatus === '0'
									? '首单延迟'
									: '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createAt"
					align="center"
					:label="$t('game.game_betslip.bet_time')"
					v-if="tableColumnData[$t('game.game_betslip.bet_time')]"
					min-width="160px"
				>
					<template slot-scope="scope">
						{{ scope.row.createAtString || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createAt"
					align="center"
					:label="$t('game.game_betslip.settle_time')"
					v-if="tableColumnData[$t('game.game_betslip.settle_time')]"
					min-width="160px"
				>
					<template slot-scope="scope">
						{{ scope.row.netAtString || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createAt"
					align="center"
					label="统计时间"
					min-width="160px"
				>
					<template slot-scope="scope">
						{{ scope.row.statisticalAtString || '-' }}
					</template>
				</el-table-column>
				<!-- <el-table-column
					prop="createAt"
					align="center"
					label="重算时间"
					min-width="160px"
					v-if="isReset"
				>
					<template slot-scope="scope">
						{{ scope.row.obCreatedAt || '-' }}
					</template>
				</el-table-column> -->
				<el-table-column
					prop="createAt"
					align="center"
					label="重算次数"
					min-width="160px"
					v-if="isReset"
				>
					<template slot-scope="scope">
						<span
							:style="{
								color: scope.row.obSettleCount > 0 ? 'red' : ''
							}"
						>
							{{ formatObSettleCount(scope.row.obSettleCount) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="matchId"
					align="left"
					min-width="300px"
					show-overflow-tooltip
					:label="$t('game.game_betslip.match_info')"
					v-if="tableColumnData[$t('game.game_betslip.match_info')]"
				>
					<template slot-scope="scope">
						<div v-if="scope.row.venueTypeCode === 'ty'">
							<template v-if="!scope.row.seriesName">
								<div
									v-for="(item, index) in scope.row.details"
									:key="index"
								>
									<template>
										<p>
											<span v-if="item.sportName">
												[{{ item.sportName }}]
											</span>
											{{ item.matchName }}
										</p>
										<p>
											{{
												item.matchInfo.split('v')[0] ||
													'-'
											}}
											VS
											{{
												item.matchInfo.split('v')[1] ||
													'-'
											}}
										</p>
										<p v-if="item.matchId">
											id: {{ item.matchId }}
										</p>
									</template>
								</div>
							</template>
							<template v-else>
								<div class="center"><span>-</span></div>
							</template>
						</div>
						<div v-else-if="scope.row.venueTypeCode === 'dj'">
							<template v-if="!scope.row.seriesName">
								<div
									v-for="(item, index) in scope.row.details"
									:key="index"
								>
									<template>
										<p>
											<span v-if="scope.row.gameTypeName">
												[{{ scope.row.gameTypeName }}]
											</span>
											{{ item.matchInfo }}
										</p>
										<p>
											{{
												item.teamName.split(',')[0] ||
													'-'
											}}
											VS
											{{
												item.teamName.split(',')[1] ||
													'-'
											}}
										</p>
										<p v-if="item.matchId">
											id: {{ item.matchId }}
										</p>
									</template>
								</div>
							</template>
							<template v-else>
								<div class="center"><span>-</span></div>
							</template>
						</div>
						<div v-else class="center">
							{{ scope.row.matchInfo || '-' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					prop="betContent"
					align="left"
					:label="$t('game.game_betslip.betting_details')"
					v-if="
						tableColumnData[$t('game.game_betslip.betting_details')]
					"
					min-width="300px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div v-if="scope.row.venueTypeCode === 'ty'">
							<template v-if="!scope.row.seriesName">
								<div
									v-for="(item, index) in scope.row.details"
									:key="index"
								>
									<template>
										<p>{{ item.playOptionName }}</p>
										<p>{{ item.playName }}</p>
										<p>
											<span
												v-if="
													marketType[item.marketType]
												"
											>
												[{{
													marketType[item.marketType]
												}}]
											</span>
											<span v-if="item.oddsValue">
												@{{ item.oddsValue }}
											</span>
											<span
												v-if="
													scope.row.venueTypeCode ===
														'ty' &&
														item.matchType === 2 &&
														item.scoreBenchmark
												"
											>
												({{ item.scoreBenchmark }})
											</span>
										</p>

										<p>
											<span
												v-if="matchType[item.matchType]"
											>
												[{{
													matchType[item.matchType]
												}}]
											</span>
											<span>
												{{
													dayjs(
														item.beginTime
													).format('MM/DD HH:mm')
												}}
											</span>
										</p>
									</template>
								</div>
							</template>
							<template v-else>
								<span>{{ scope.row.seriesName }}</span>
							</template>
						</div>
						<div v-else-if="scope.row.venueTypeCode === 'dj'">
							<template v-if="!scope.row.seriesName">
								<div
									v-for="(item, index) in scope.row.details"
									:key="index"
								>
									<template>
										<p>{{ item.playOptionName }}</p>
										<p>{{ item.playName }}</p>
										<p>
											<span v-if="item.marketCnName">
												[{{ item.marketCnName }}]
											</span>
											<span v-if="item.oddsValue">
												@{{ item.oddsValue }}
											</span>
										</p>

										<p>
											<span
												v-if="isLiveType[item.isLive]"
											>
												[{{ isLiveType[item.isLive] }}]
											</span>
											<span>
												{{
													dayjs(
														item.matchStartTime
													).format('MM/DD HH:mm')
												}}
											</span>
										</p>
									</template>
								</div>
							</template>
							<template v-else>
								<span>{{ scope.row.seriesName }}</span>
							</template>
						</div>
						<div v-else-if="scope.row.venueTypeCode === 'zr'">
							<div
								v-if="
									scope.row.gameTypeName.indexOf('百家乐') >
										-1
								"
							>
								<p>
									{{ scope.row.playOptionName }}@{{
										scope.row.oddsValue
									}}
								</p>
								<p>{{ scope.row.judgeResultCn }}</p>
								<p>{{ scope.row.judgeResult1 }}</p>
							</div>
							<div v-else class="center"><span>-</span></div>
						</div>
						<div v-else-if="scope.row.venueTypeCode === 'cp'">
							<p>{{ scope.row.ticketPlanNo }}</p>
							<p>{{ scope.row.gameTypeName }}</p>
							<p>{{ scope.row.playName }}</p>
						</div>
						<div v-else class="center">
							<span v-if="scope.row.gameTypeId < -1">
								<el-link
									type="primary"
									@click="
										lookBetting(scope.row, scope.$index)
									"
								>
									{{ scope.row.betContent }}
								</el-link>
							</span>
							<span v-else>
								{{ scope.row.betContent || '-' }}
							</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column
					prop="obDeviceType"
					align="center"
					v-if="tableColumnData[$t('game.game_betslip.bet_ip')]"
					:label="$t('game.game_betslip.bet_ip')"
					min-width="150px"
				>
					<template slot-scope="scope">
						{{ scope.row.loginIp || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="obDeviceType"
					align="center"
					v-if="
						tableColumnData[$t('game.game_betslip.ip_attribution')]
					"
					:label="$t('game.game_betslip.ip_attribution')"
					min-width="150px"
				>
					<template slot-scope="scope">
						{{ scope.row.ipAttribution || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="obDeviceType"
					align="center"
					v-if="tableColumnData[$t('game.game_betslip.bet_device')]"
					:label="$t('game.game_betslip.bet_device')"
					min-width="150px"
				>
					<template slot-scope="scope">
						<span v-if="scope.row.obDeviceType === '其他'">
							{{ scope.row.obDeviceType }}
						</span>

						<span v-else>
							{{
								scope.row.obDeviceType === 6
									? 'Robot'
									: typeFilter(
											scope.row.obDeviceType,
											'loginDeviceType'
									  )
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('common.actions')"
					fixed="right"
					min-width="100px"
				>
					<template slot-scope="scope">
						<el-link
							v-if="hasPermission('302012')"
							type="primary"
							@click="lookMsg(scope.row, scope.$index)"
						>
							{{ $t('common.check_detail') }}
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<!-- 查看详情 -->
		<el-dialog
			:title="$t('game.game_betslip.note_details')"
			:visible.sync="detailDialog.visible"
			width="1500px"
			@close="2"
		>
			<div class="game-container report-container">
				<div class="view-container dealer-container">
					<notedetails
						:dataList="dataList"
						:lookMsgList="lookMsgList"
					></notedetails>
					<div
						v-for="detailItem in betHisDetails"
						:key="detailItem.id"
					>
						<realDetails
							v-if="venueTypeCode === 'zr'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
							:isReset="isReset"
						></realDetails>
						<chessDetails
							v-else-if="venueTypeCode === 'qp'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
							:isReset="isReset"
						></chessDetails>
						<sportDetails
							v-else-if="venueTypeCode === 'ty'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
							:isReset="isReset"
						></sportDetails>
						<eSportDetails
							v-else-if="venueTypeCode === 'dj'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
							:isReset="isReset"
						></eSportDetails>
						<lotteryDetails
							v-else-if="venueTypeCode === 'cp'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
							:isReset="isReset"
						></lotteryDetails>
						<eGameDetails
							v-else-if="venueTypeCode === 'dy'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
							:isReset="isReset"
						></eGameDetails>
						<regionalChain
							v-else-if="venueTypeCode === 'qkl'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
							:isReset="isReset"
						></regionalChain>
						<dzDetails
							v-else-if="venueTypeCode === 'DZ_CARD'"
							:dataList="detailItem"
							:parentBetTypes="parentBetTypes"
							:parentBetSubTypes="parentBetSubTypes"
							:lookMsgList="lookMsgList"
							:isReset="isReset"
						></dzDetails>
						<slotDetails
							v-else
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
							:isReset="isReset"
						></slotDetails>
					</div>
				</div>
			</div>

			<div class="arrowStyel">
				<el-link
					:disabled="detailDialog.currentRecordIndex === 0"
					type="primary"
					:underline="false"
					@click="handlePrevOrNext(1)"
				>
					<i class="el-icon-d-arrow-left"></i>
					{{ $t('game.game_betslip.previous') }}
				</el-link>
				<div>
					<el-button @click="detailDialog.visible = false">
						{{ $t('member.close') }}
					</el-button>
				</div>
				<el-link
					:disabled="
						detailDialog.currentRecordIndex >= tableData.length - 1
					"
					type="primary"
					:underline="false"
					@click="handlePrevOrNext(2)"
				>
					{{ $t('game.game_betslip.next') }}

					<i class="el-icon-d-arrow-right"></i>
				</el-link>
			</div>
		</el-dialog>
		<!-- 投注详情 -->

		<el-dialog
			:title="cascading"
			:visible.sync="dialogGameVisible"
			:destroy-on-close="true"
			class="rempadding"
		>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="gameList"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="gameTypeName"
					align="center"
					:label="$t('member.game_id')"
				>
					<template slot-scope="scope">
						{{ scope.row.gameTypeName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="event"
					align="center"
					:label="$t('game.game_betslip.event')"
				>
					<template slot-scope="scope">
						{{ scope.row.event || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="playName"
					align="center"
					:label="$t('game.game_betslip.playName')"
				>
					<template slot-scope="scope">
						{{ scope.row.playName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="content"
					align="center"
					:label="$t('game.game_betslip.content')"
				>
					<template slot-scope="scope">
						{{ scope.row.content || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="marketType"
					align="center"
					:label="$t('game.game_betslip.marketType')"
				>
					<template slot-scope="scope">
						{{ scope.row.marketType || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="betAmount"
					align="center"
					:label="$t('game.game_betslip.bet_amount')"
				>
					<template slot-scope="scope">
						{{ handleCurrency(currency) }}
						{{ handleNumber(currency, scope.row.betAmount) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="oddsValues"
					align="center"
					:label="$t('game.game_betslip.oddsValues')"
				>
					<template slot-scope="scope">
						{{ scope.row.oddsValues || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页
			<el-pagination
				:current-page.sync="page"
				background
				class="fenye"
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="size"
				:page-sizes="[5, 10, 15]"
				:total="summary"
				@current-change="handleCurrentChangeDialog"
				@size-change="handleSizeChangeDialog"
			></el-pagination> -->
		</el-dialog>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import { getVenueListWithoutPage } from '@/api//game'
import Money from './components/money.vue'
import notedetails from './components/Notedetails'
import realDetails from './components/realDetails'
import chessDetails from './components/chessDetails'
import sportDetails from './components/sportDetails'
import eSportDetails from './components/eSportDetails'
import lotteryDetails from './components/lotteryDetails'
import eGameDetails from './components/eGameDetails'
import slotDetails from './components/slotDetails'
import dzDetails from './components/dzDetails'
import regionalChain from './components/regionalChain'
import MainContent from '@/components/MainContent/index.vue'
import gameMixins from '../mixins/index'
import DatePickerShortcuts from '@/components/DatePickerShortcuts'
import summaryList from './components/summaryList'
const startTime = () =>
	dayjs()
		.startOf('day')
		.valueOf()
const endTime = () =>
	dayjs()
		.endOf('day')
		.valueOf()

export default {
	name: routerNames.gameBetslipTable,
	components: {
		notedetails,
		realDetails,
		chessDetails,
		sportDetails,
		eSportDetails,
		lotteryDetails,
		eGameDetails,
		slotDetails,
		regionalChain,
		dzDetails, // 德州详情
		Money,
		MainContent,
		DatePickerShortcuts
	},
	mixins: [list, gameMixins, summaryList],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			activityListField: {
				[this.$t('game.game_betslip.bet_number')]: true,
				[this.$t('common.member_number')]: true,
				[this.$t('game.game_betslip.three_bet_number')]: true,
				[this.$t('game.venue_access_manage.venue_type')]: true,
				[this.$t('game.venue_name')]: true,
				[this.$t('game.game_manage.game_name')]: true,
				[this.$t('common.game_number')]: true,
				[this.$t('common.number_type')]: true,
				[this.$t('game.game_betslip.merchant_name')]: true,
				[this.$t('common.top_agent')]: true,
				[this.$t('game.game_betslip.general_agent')]: true,
				[this.$t('game.game_betslip.bet_amount')]: true,
				[this.$t('game.game_betslip.parent_betType')]: true,
				[this.$t('game.game_betslip.pump_contribution')]: true,
				[this.$t(
					'game.game_betslip.pump_contribution_contribution'
				)]: true,
				[this.$t('game.game_betslip.efficient_bet')]: true,
				[this.$t('game.game_betslip.member_win')]: true,
				[this.$t('game.game_betslip.bet_status')]: true,
				[this.$t('game.game_betslip.ob_settle_count')]: true,
				[this.$t('game.game_betslip.bet_time')]: true,
				[this.$t('game.game_betslip.settle_time')]: true,
				[this.$t('game.game_betslip.match_info')]: true,
				[this.$t('game.game_betslip.betting_details')]: true,
				[this.$t('game.game_betslip.bet_ip')]: true,
				[this.$t('game.game_betslip.ip_attribution')]: true,
				[this.$t('game.game_betslip.bet_device')]: true
			},
			exportLoading: false,
			currency: '',
			cascading: '',
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			dialogGameVisible: false,
			gameList: [],
			detailDialog: {
				visible: false,
				currentRecordId: '',
				currentRecordIndex: ''
			},
			dataList: {},
			betHisDetails: [],
			lookMsgList: {},
			timeTypeOption: {
				betTime: [startTime(), endTime()],
				sunTime: [startTime(), endTime()],
				reTime: [startTime(), endTime()],
				statTime: [startTime(), endTime()],
				matchTime: [startTime(), endTime()]
			},
			timeType: 'betTime',
			orderType: 'id',
			memberType: 'memberName',
			queryData: {},
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			summary: {
				totalCount: 0,
				settledCount: 0,
				unSettledCount: 0,
				betAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
				netAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
				validBetAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
				currPageBetAmount: 0,
				currPageNetAmount: 0,
				pumpContributionAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
				currPageValidBetAmount: 0,
				userHandFeeAmount: {
					cnySum: 0,
					thbSum: 0,
					usdtSum: 0,
					vndSum: 0
				}
			},
			tableData: [],
			venueTypeCode: 'init',
			dialogFormdata: {},
			dialogFormVisible: false,
			dialogForm: {},
			siteType: 'appId',
			bwVenueList: [],
			parentBetTypes: {},
			parentBetSubTypes: {},
			matchNameList: [], // 赛事/联赛名称列表
			matchType: {
				1: '早盘',
				2: '滚球',
				3: '冠军',
				4: '虚拟',
				5: '电竞'
			},
			marketType: {
				EU: '欧盘',
				HK: '香港盘'
			},
			isLiveType: {
				1: '初盘',
				2: '滚盘'
			},
			remoteLoading: false,
			options: [],
			isCollapsed: true
		}
	},
	computed: {
		dayjs() {
			return dayjs
		},
		// 场馆类型
		bwVenueTypeList() {
			return this.globalDics.bwVenueTypeList || []
		},
		accountType() {
			return this.globalDics.accountType || []
		},
		betDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		betStatusType() {
			return (
				this.globalDics.betStatusType?.filter((item) => {
					if (this.isReset) {
						return item.code !== '0'
					}
					return true
				}) || []
			)
		},
		appIdArr() {
			return this.globalDics.appId || []
		}
	},
	watch: {
		memberType() {
			this.$set(this.queryData, 'memberName', '')
			this.$set(this.queryData, 'playerName', '')
			this.$set(this.queryData, 'parentProxyName', '')
			this.$set(this.queryData, 'topProxyName', '')
			this.$set(this.queryData, 'proxyName', '')
		},
		orderType() {
			this.$set(this.queryData, 'id', '')
			this.$set(this.queryData, 'generatedId', '')
		}
	},
	created() {
		this.initIndexDB('gameBetslipTable', this.activityListField)
	},
	mounted() {
		// this.getGameTypeList()
		this.getBwVenueList()
		this.getGameRecoedTypeSection()
	},
	methods: {
		toggleSearchArea() {
			this.isCollapsed = !this.isCollapsed
			// 加0.001 是为了手动触发 tableHeight 的监听
			// 以达到重新计算table height的目的
			this.tableHeight += 0.001
		},
		async remoteMethod(query) {
			if (query !== '') {
				this.remoteLoading = true
				try {
					await this.getMatchNameList({
						name: query
					})
					this.matchNameList =
						this.options.filter((item) => {
							return (
								item.label
									.toLowerCase()
									.indexOf(query.toLowerCase()) > -1
							)
						}) || []
					this.remoteLoading = false
				} catch (error) {
					this.options = []
					this.remoteLoading = false
				}
			} else {
				this.options = []
			}
		},
		// 获取联赛/赛事名称
		async getMatchNameList(params) {
			await this.$api.gameRecordsGameLeagueList(params).then((res) => {
				if (res.code === 200 && res.data) {
					this.options =
						Array.isArray(res.data) && res.data.length
							? res.data.map((item) => {
									return {
										label: item,
										value: item
									}
							  })
							: []
				} else {
					this.options = []
				}
			})
		},
		// 查询注单类型
		async getGameRecoedTypeSection() {
			try {
				const res = await this.$api.getGameRecoedTypeSection()
				if (res.code === 200 && res.data) {
					res.data.forEach((item) => {
						// this.parentBetTypes[item.type] = item.desc

						if (item.subList && item.subList.length > 0) {
							this.parentBetSubTypes[item.type] = {}
							item.subList.forEach((subItem) => {
								if (subItem.type == 1) {
									subItem.desc = '俱乐部游戏'
								}
								this.parentBetTypes[subItem.type] = subItem.desc
								this.parentBetSubTypes[item.type][
									subItem.type
								] = subItem.desc
							})
						}
					})
				}
			} catch (err) {
				throw err
			}
		},
		handleShortcutBtnClick(val) {
			this.timeTypeOption[this.timeType] = val
			this.loadData()
		},
		// 获取场馆列表
		getBwVenueList() {
			getVenueListWithoutPage().then((res) => {
				if (res.data && res.data.length > 0) {
					this.bwVenueList = res.data
				}
			})
		},
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0) {
				return 'background:#EFEFEF; text-align: center'
			} else {
				return ''
			}
		},
		getCurrency(key) {
			const currencyMap = {
				thbSum: { id: 'th', currency: 'THB' },
				cnySum: { id: 'zh', currency: 'CNY' },
				vndSum: { id: 'vn', currency: 'VND' },
				usdtSum: { id: 'usd', currency: 'USD' }
			}
			if (currencyMap[key]) {
				const map = currencyMap[key]
				return map ? map.currency : ''
			} else {
				return ''
			}
		},
		getParams(params) {
			return Object.keys(params).reduce((prev, next) => {
				if (params[next] !== '') {
					prev[next] = params[next]
				}
				return prev
			}, {})
		},
		loadData() {
			// 加0.001 是为了手动触发 tableHeight 的监听
			// 以达到重新计算table height的目的
			this.tableHeight += 0.001
			this.isCollapsed = true
			this.loading = true
			const create = this.timeTypeOption.betTime || []
			const net = this.timeTypeOption.sunTime || []
			const re = this.timeTypeOption.reTime || []
			const [startTime, endTime] = create
			const [netAtStart, netAtEnd] = net
			const [reStart, reEnd] = re
			const time = {}

			if (this.timeType === 'betTime') {
				Object.assign(time, {
					createAtStart: startTime
						? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
						: '',
					createAtEnd: endTime
						? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
						: ''
				})
			}

			if (this.timeType === 'sunTime') {
				Object.assign(time, {
					netAtStart: netAtStart
						? dayjs(netAtStart).format('YYYY-MM-DD HH:mm:ss')
						: '',
					netAtEnd: netAtEnd
						? dayjs(netAtEnd).format('YYYY-MM-DD HH:mm:ss')
						: ''
				})
			}

			if (this.timeType === 'reTime') {
				Object.assign(time, {
					reNetAtStart: reStart
						? dayjs(reStart).format('YYYY-MM-DD HH:mm:ss')
						: '',
					reNetAtEnd: reEnd
						? dayjs(reEnd).format('YYYY-MM-DD HH:mm:ss')
						: ''
				})
			}
			const statTime = this.timeTypeOption.statTime || []
			const [statStart, statEnd] = statTime
			const statisticalAtStart = statStart
				? dayjs(statStart).format('YYYY-MM-DD HH:mm:ss')
				: ''
			const statisticalAtEnd = statEnd
				? dayjs(statEnd).format('YYYY-MM-DD HH:mm:ss')
				: ''
			if (this.timeType === 'statTime') {
				Object.assign(time, {
					statisticalAtStart,
					statisticalAtEnd
				})
			}

			const matchTime = this.timeTypeOption.matchTime || []
			const [matchStart,matchEnd] = matchTime
			const matchStartTimeStart = matchStart
				? dayjs(matchStart).format('YYYY-MM-DD HH:mm:ss')
				: ''
			const matchStartTimeEnd = matchEnd
				? dayjs(matchEnd).format('YYYY-MM-DD HH:mm:ss')
				: ''
			if (this.timeType === 'matchTime') {
				Object.assign(time, {
					matchStartTimeStart,
					matchStartTimeEnd
				})
			}



			let params = {
				...this.queryData,
				...time
			}
			params[this.siteType] = params.appType
			params = {
				...this.getParams(params)
			}
			delete params.appType
			if (params.configVipRebateMin > 0) {
				params.configVipRebateMin = (
					params.configVipRebateMin / 100
				).toFixed(4)
			}
			if (params.configVipRebateMax > 0) {
				params.configVipRebateMax = (
					params.configVipRebateMax / 100
				).toFixed(4)
			}
			if (
				startTime ||
				endTime ||
				netAtStart ||
				netAtEnd ||
				statisticalAtStart ||
				statisticalAtEnd
			) {
				this.fetchApi({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...params
				})
					.then((res) => {
						this.loading = false
						const {
							data: { record, totalRecord, summary }
						} = res || {}
						if (res?.code === 200) {
							this.tableData = Array.isArray(record)
								? Object.freeze(record)
								: []
							for (let i = 0; i < this.tableData.length; i++) {
								this.tableData[i].details = JSON.parse(
									this.tableData[i].details
								)
							}
							this.total = totalRecord || 0
							this.now = dayjs(new Date()).format(
								'YYYY-MM-DD HH:mm:ss'
							)
							const initSummary = {
								totalCount: 0,
								settledCount: 0,
								unSettledCount: 0,
								betAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
								netAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
								validBetAmount: {
									cnySum: 0,
									thbSum: 0,
									vndSum: 0
								},
								pumpContributionAmount: {
									cnySum: 0,
									thbSum: 0,
									vndSum: 0
								},
								currPageBetAmount: 0,
								currPageNetAmount: 0,
								currPageValidBetAmount: 0
							}
							this.summary = summary || initSummary
							this.summary.totalCount = this.total
						}
					})
					.catch(() => {
						this.loading = false
					})
			} else {
				this.loading = false
				this.$message.warning(this.$t('game.game_betslip.message1'))
			}
		},
		reset() {
			this.queryData = {}
			this.timeType = 'betTime'
			this.orderType = 'id'
			this.memberType = 'memberName'
			this.timeTypeOption.sunTime = [startTime(), endTime()]
			this.timeTypeOption.betTime = [startTime(), endTime()]
			this.pageNum = 1
			this.loadData()
		},
		_changeTableSort({ prop, order }) {
			console.log(prop)
			const obj = {
				betAmount: 1,
				netAmount: 3,
				validBetAmount: 2
				// createAt: 3,
				// netAt: 4,
				// vipRebateRate: 5,
				// rebateAmount: 6,
				// startTime: 8,
				// maxWin: 9
			}
			this.queryData.orderKey = obj[prop]
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = '1'
			} else if (order === 'descending') {
				// 降序
				this.queryData.orderType = '2'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		checkValue(e) {
			const { name, value } = e.target
			switch (name) {
				case 'betAmountMin':
					if (value && value * 1 > this.queryData.betAmountMax * 1) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message2')
						})
						this.queryData.betAmountMin = undefined
					} else if (value !== '' && value * 1 >= 0) {
						// console.log('6465456464', value * 1)
						this.queryData.betAmountMin = value
					} else {
						this.queryData.betAmountMin = undefined
					}
					break
				case 'betAmountMax':
					if (value && value * 1 < this.queryData.betAmountMin * 1) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message3')
						})
						this.queryData.betAmountMax = undefined
					} else if (value !== '' && value * 1 >= 0) {
						this.queryData.betAmountMax = value
					} else {
						this.queryData.betAmountMax = undefined
					}
					break
				case 'netAmountMin':
					if (value && value * 1 > this.queryData.netAmountMax * 1) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message4')
						})
						this.queryData.netAmountMin = undefined
					} else if (value !== '') {
						// console.log('6465456464', value * 1)
						this.queryData.netAmountMin = value
					} else {
						this.queryData.netAmountMin = undefined
					}
					break
				case 'netAmountMax':
					if (value && value * 1 < this.queryData.netAmountMin * 1) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message5')
						})
						this.queryData.netAmountMax = undefined
					} else if (value !== '') {
						this.queryData.netAmountMax = value
					} else {
						this.queryData.netAmountMax = undefined
					}
					break
				case 'vipLevelMin':
					if (value && value * 1 > this.queryData.vipLevelMax * 1) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message6')
						})
						this.queryData.vipLevelMin = undefined
					} else if (value !== '' && value * 1 >= 0) {
						this.queryData.vipLevelMin = value
					} else {
						this.queryData.vipLevelMin = undefined
					}
					break
				case 'vipLevelMax':
					if (value && value * 1 < this.queryData.vipLevelMin * 1) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message7')
						})
						this.queryData.vipLevelMax = undefined
					} else if (value !== '' && value * 1 >= 0) {
						this.queryData.vipLevelMax = value
					} else {
						this.queryData.vipLevelMax = undefined
					}
					break
				case 'configVipRebateMin':
					if (
						value &&
						value * 1 > this.queryData.configVipRebateMax * 1
					) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message8')
						})
						this.queryData.configVipRebateMin = undefined
					} else if (value !== '' && value * 1 >= 0) {
						this.queryData.configVipRebateMin = value
					} else {
						this.queryData.configVipRebateMin = undefined
					}
					break
				case 'configVipRebateMax':
					if (
						value &&
						value * 1 < this.queryData.configVipRebateMin * 1
					) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message9')
						})
						this.queryData.configVipRebateMax = undefined
					} else if (value !== '' && value * 1 >= 0) {
						this.queryData.configVipRebateMax = value
					} else {
						this.queryData.configVipRebateMax = undefined
					}
					break
				case 'rebateAmountMin':
					if (
						value &&
						value * 1 > this.queryData.rebateAmountMax * 1
					) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message10')
						})
						this.queryData.rebateAmountMin = undefined
					} else if (value !== '' && value * 1 >= 0) {
						this.queryData.rebateAmountMin = value
					} else {
						this.queryData.rebateAmountMin = undefined
					}
					break
				case 'rebateAmountMax':
					if (
						value &&
						value * 1 < this.queryData.rebateAmountMin * 1
					) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message11')
						})
						this.queryData.rebateAmountMax = undefined
					} else if (value !== '' && value * 1 >= 0) {
						this.queryData.rebateAmountMax = value
					} else {
						this.queryData.rebateAmountMax = undefined
					}
					break
				case 'validBetAmountMin':
					if (
						value &&
						value * 1 > this.queryData.validBetAmountMax * 1
					) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message10')
						})
						this.queryData.validBetAmountMin = undefined
					} else if (value !== '' && value * 1 >= 0) {
						this.queryData.validBetAmountMin = value
					} else {
						this.queryData.validBetAmountMin = undefined
					}
					break
				case 'validBetAmountMax':
					if (
						value &&
						value * 1 < this.queryData.validBetAmountMin * 1
					) {
						this.$message({
							type: 'warning',
							message: this.$t('game.game_betslip.message11')
						})
						this.queryData.validBetAmountMax = undefined
					} else if (value !== '' && value * 1 >= 0) {
						this.queryData.validBetAmountMax = value
					} else {
						this.queryData.validBetAmountMax = undefined
					}
					break
			}
		},
		exportExcel() {
			const create = this.timeTypeOption.betTime || []
			const net = this.timeTypeOption.sunTime || []
			const re = this.timeTypeOption.reTime || []
			const [startTime, endTime] = create
			const [netAtStart, netAtEnd] = net
			const [reStart, reEnd] = re
			const time = {}
			if (this.timeType === 'betTime') {
				Object.assign(time, {
					createAtStart: startTime
						? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
						: '',
					createAtEnd: endTime
						? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
						: ''
				})
			}

			if (this.timeType === 'sunTime') {
				Object.assign(time, {
					netAtStart: netAtStart
						? dayjs(netAtStart).format('YYYY-MM-DD HH:mm:ss')
						: '',
					netAtEnd: netAtEnd
						? dayjs(netAtEnd).format('YYYY-MM-DD HH:mm:ss')
						: ''
				})
			}

			if (this.timeType === 'reTime') {
				Object.assign(time, {
					reNetAtStart: reStart
						? dayjs(reStart).format('YYYY-MM-DD HH:mm:ss')
						: '',
					reNetAtEnd: reEnd
						? dayjs(reEnd).format('YYYY-MM-DD HH:mm:ss')
						: ''
				})
			}

			const matchTime = this.timeTypeOption.matchTime || []
			const [matchStart,matchEnd] = matchTime
			const matchStartTimeStart = matchStart
				? dayjs(matchStart).format('YYYY-MM-DD HH:mm:ss')
				: ''
			const matchStartTimeEnd = matchEnd
				? dayjs(matchEnd).format('YYYY-MM-DD HH:mm:ss')
				: ''
			if (this.timeType === 'matchTime') {
				Object.assign(time, {
					matchStartTimeStart,
					matchStartTimeEnd
				})
			}

			const statTime = this.timeTypeOption.statTime || []
			const [statStart, statEnd] = statTime
			const statisticalAtStart = statStart ? dayjs(statStart).format('YYYY-MM-DD HH:mm:ss') : ''
			const statisticalAtEnd = statEnd ? dayjs(statEnd).format('YYYY-MM-DD HH:mm:ss') : ''
			if (this.timeType === 'statTime') {
				Object.assign(time, {
					statisticalAtStart,
					statisticalAtEnd
				})
			}

			let params = {
				...this.queryData,
				...time
			}
			params = {
				...this.getParams(params)
			}
			if (params.configVipRebateMin > 0) {
				params.configVipRebateMin = (
					params.configVipRebateMin / 100
				).toFixed(4)
			}
			if (params.configVipRebateMax > 0) {
				params.configVipRebateMax = (
					params.configVipRebateMax / 100
				).toFixed(4)
			}
			if (startTime || endTime || netAtStart || netAtEnd) {
				this.exportLoading = true
				this.fetchExportExcel(params).finally(() => {
					this.exportLoading = false
				})
				// this.$confirm(
				// 	`<strong>${this.$t(
				// 		'game.game_betslip.whether_export'
				// 	)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
				// 		'game.game_betslip.export_tips'
				// 	)}</span>`,
				// 	this.$t('common.success_tip'),
				// 	{
				// 		dangerouslyUseHTMLString: true,
				// 		confirmButtonText: this.$t('common.confirm'),
				// 		cancelButtonText: this.$t('common.cancel'),
				// 		type: 'warning'
				// 	}
				// )
				// 	.then(() => {
				// 		this.$api
				// 			.gameRecordsListExport(params)
				// 			.then((res) => {
				// 				this.loading = false
				// 				const { data, status } = res || {}
				// 				if (res && status && status === 200) {
				// 					const { type = [] } = data || {}
				// 					if (type.includes('application/json')) {
				// 						const reader = new FileReader()
				// 						reader.onload = (evt) => {
				// 							if (
				// 								evt &&
				// 								evt.target.readyState === 2
				// 							) {
				// 								const {
				// 									target: { result }
				// 								} = evt
				// 								const ret = JSON.parse(result)
				// 								if (ret && ret.code !== 200) {
				// 									this.$message({
				// 										type: 'error',
				// 										message: ret.msg,
				// 										duration: 1500
				// 									})
				// 								}
				// 							}
				// 						}
				// 						reader.readAsText(data)
				// 					} else {
				// 						const result = res.data
				// 						const disposition =
				// 							res.headers['content-disposition']
				// 						const fileNames =
				// 							disposition &&
				// 							disposition.split("''")
				// 						let fileName = fileNames[1]
				// 						fileName = decodeURIComponent(fileName)
				// 						const blob = new Blob([result], {
				// 							type: 'application/octet-stream'
				// 						})
				// 						if (
				// 							'download' in
				// 							document.createElement('a')
				// 						) {
				// 							const downloadLink = document.createElement(
				// 								'a'
				// 							)
				// 							downloadLink.download =
				// 								fileName || ''
				// 							downloadLink.style.display = 'none'
				// 							downloadLink.href = URL.createObjectURL(
				// 								blob
				// 							)
				// 							document.body.appendChild(
				// 								downloadLink
				// 							)
				// 							downloadLink.click()
				// 							URL.revokeObjectURL(
				// 								downloadLink.href
				// 							)
				// 							document.body.removeChild(
				// 								downloadLink
				// 							)
				// 						} else {
				// 							window.navigator.msSaveBlob(
				// 								blob,
				// 								fileName
				// 							)
				// 						}
				// 						this.$message({
				// 							type: 'success',
				// 							message: this.$t(
				// 								'common.export_success'
				// 							),
				// 							duration: 1500
				// 						})
				// 					}
				// 				}
				// 			})
				// 			.catch(() => {
				// 				this.loading = false
				// 				this.$message({
				// 					type: 'error',
				// 					message: this.$t('common.export_err'),
				// 					duration: 1500
				// 				})
				// 			})
				// 	})
				// 	.catch(() => {})
			} else {
				this.$message.warning(this.$t('game.game_betslip.message1'))
			}
		},
		goBack() {
			this.venueTypeCode = 'init'
		},
		enterSubmit() {
			this.loadData()
		},
		// 查看详情
		lookMsg(val, index) {
			this.lookMsgList = val
			this.venueTypeCode = val.venueTypeCode
			this.detailDialog.visible = true
			this.detailDialog.currentRecordId = val.id
			this.detailDialog.currentRecordIndex = index
			this.pageScrollTop =
				document.documentElement.scrollTop || document.body.scrollTop
			this.getdetailsdata(val, 1)
		},
		handlePrevOrNext(type) {
			// type 1 上一条  2下一条
			const index =
				type === 1
					? this.detailDialog.currentRecordIndex - 1
					: this.detailDialog.currentRecordIndex + 1

			if (this.tableData[index]) {
				this.detailDialog.currentRecordIndex = index
				this.getdetailsdata(this.tableData[index], 1)
			}
		},
		getdetailsdata(val, flag) {
			const data = {}
			data.id = val.id
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.dataList = {}
			this.betHisDetails = []
			// 是否重算
			if (val.obSettleCount > 0 && flag === 1 && !this.isReset) {
				this.$api
					.getResettlementGameRecordDetails(data)
					.then((res) => {
						if (res.code === 200) {
							this.betHisDetails = res.data.betHisDetails
							this.dataList = res.data
						}
						loading.close()
					})
					.catch(() => {
						loading.close()
					})
				return
			}
			this.fetchDetailApi(data)
				.then((res) => {
					if (res?.code === 200) {
						this.dataList = res.data
						this.gameList = res.data.betDetails
						this.betHisDetails = [res.data]

						if (flag === 1) {
							this.detailDialog.visible = true
							this.venueTypeCode = val.venueTypeCode || 'init'
						} else {
							this.dialogFormVisible = true
						}
						loading.close()
					}
				})
				.catch(() => {
					loading.close()
				})
		},
		// 投注详情
		lookBetting(val) {
			this.currency = val.memberCurrency
			this.cascading = val.betContent
			this.dialogGameVisible = true
			this.getdetailsdata(val)
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			this.updateIndexDB()
		},
		// 打开列设置弹框
		openColSettings() {
			this.getIndexDB(this.activityListField)
			this.colSettings.visible = true
		},
		clickDel() {
			const activityListColumn = {}
			Object.keys(this.activityListField).forEach((item) => {
				activityListColumn[item] = true
			})
			this.dialogColumnData = Object.assign({}, activityListColumn)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
.bet-details-dialog {
	::v-deep th {
		color: #ffff;
		background: #000;
		border: 1px solid #000;
		line-height: 1;
	}
}

.msgList {
	font-size: 14px;
	display: flex;
	line-height: 24px;
	text-align: center;
	p {
		margin-right: 20px;
	}
	&:last-child p {
		margin-bottom: 15px;
	}
}
// .view-container {
// 	border: 1px solid #dcdfe6;
// 	font-size: 14px;
// }
.review-content {
	line-height: 30px;
}
.paddingLR {
	padding: 0 30px;
}
.head {
	height: 70px;
	line-height: 70px;
	width: 100%;
	background: #000;
	border-radius: 2px;
	display: flex;
	justify-content: space-between;
	.title {
		font-weight: 600;
		font-size: 16px;
		color: rgb(192, 190, 190);
	}
	.right-btn {
		float: right;
	}
}
.strong {
	height: 70px;
	line-height: 80px;
}
.paddingB {
	padding-bottom: 30px;
}
.arrowStyel {
	display: flex;
	justify-content: space-around;
}

.vi_VN,
.en_US {
	.game-container {
		margin-left: 0;
		margin-right: 0;

		::v-deep .betslip {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

::v-deep .footer_count_row {
	min-height: 40px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.center {
	text-align: center;
}
.query-form-collapsed {
	max-height: 120px;
	overflow: hidden;
}
</style>
